<template>
    <div class="game-list-page">
        <div class="top">
            <div class="left">
                <a class="back-tit" @click="handleBack">
                    <a class="back"></a>
                    <div class="tit-text">{{ info.title }}</div>
                    <i>{{ info.num }} 收藏</i>
                    <span class="f-type ftp_1">图片集收藏夹</span>
                </a>
                <div class="desc-row">
                    {{ info.content }}
                </div>
            </div>
            <a class="fav-btn" :class="{ 'active': info.isSubscribe > 0 }" @click="handleFollowFolder">{{ info.isSubscribe > 0 ? '已关注' : '关注收藏夹' }}</a>
        </div>
        <div class="sub-row">
            <div class="left">
                <a class="img-box" :href="'/user/'+info.member.id" target="_blank">
                    <img loading="lazy" v-aimgd="{ avatar: info.member.avatar, id: info.member.id, w: 24, name: info.member.userName }"/>
                </a>
                <a class="uname" :href="'/user/'+info.member.id" target="_blank">{{ info.member.userName }}<img loading="lazy" class="u-m-tag" v-for="tag in info.member.tagsList" :src="tag.image" alt=""></a>
                <span class="time">更新于 {{info.updateTimeStr}}</span>
                <span class="follow-num">被 {{info.fans}} 人关注</span>
            </div>
            <div class="right">
                <div class="filter-bx">
                    <div class="seach-bx">
                        <form @submit.prevent="() => { return false; }">
                            <input type="text" v-model="keyword" placeholder="搜索" @keypress.enter="onDdlSearch"><i
                            v-if="keyword" @click="keyword = ''" class="clear-by-search"></i>
                        </form>
                    </div>
                    <!-- <div class="mk-cus-ddl">
                        <span class="cur">全部</span>
                        <div class="sub-dd-block">
                            <ul class="sub-ddls">
                                <li><a>全部</a></li>
                                <li><a>待审核</a></li>
                                <li><a>已通过</a></li>
                                <li><a>未通过</a></li>
                            </ul>
                        </div>
                    </div> -->
                </div>
                <DropDown :list="statusList" :showAll="true" :value.sync="params.type" :width="150"
                    placeholder="请选择" @change="onDdlSearch" />
            </div>
        </div>
        <div class="games">
            <a class="fav-d-item" :class="[item.selected ? 'active' : '']"  v-for="(item, i) in info.collectList" @click.prevent="()=>{toInfo(item)}" 
                :key="i" v-if="item.show">
                <a class="hid-el select-btn" :class="{ active: item.selected }"  @click.stop="item.selected = !item.selected" v-if="loginUid==info.member.id"></a>
                <div class="img-flex-box">
                    <div class="main-img mimg-box">
                        <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="(e)=>{loadError(e,item)}"
                            alt="" />
                        <span class="pnum">{{ item.article.totalImageCount }}</span>
                        <div class="cate-dsc">{{item.article.device}}{{item.article.categoryName?(item.article.device?' · ':'')+item.article.categoryName:''}}{{item.article.style?' · '+item.article.style:''}}{{item.article.era?' · '+item.article.era:''}}</div>
                    </div>
                </div>
                <div class="bot-desc">
                    <span class="file-name">{{ item.article.title }}</span>
                    <span class="type-text">{{ infoUrlEnum[item.article.categoryTopId].name }}</span>
                    <!-- <span class="type-text">{{item.article.categoryTopId}}</span> -->
                </div>
                <div class="bot-author">
                    <a class="u" @click.stop="toUsercenter(item.member.id)">
                        <span class="img-box">
                            <img loading="lazy"
                                v-aimgd="{ avatar: item.article.member.avatar, id: item.article.member.id, w: 20, name: item.article.member.userName }" />
                        </span>
                        <span class="name">{{ item.article.member.userName }}
                            
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.article.member.tagsList">
                                                <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                </el-popover>
                        </span>
                    </a>
                    <div class="rt">
                        <span class="like-num">{{item.article.praiseStr}}</span>
                        <span class="vnum">{{item.article.seeStr}}</span>
                    </div>
                </div>
            </a>
        </div>
        
        <Empty text="空空如也~" v-if="info.collectList.length==0&&!isloading"/>

        <div class="no-more-text" v-if="!isloading&&info.collectList.length>0">没有更多了</div>
        <div class="select-d-fix" :class="{ active: selectIds.length > 0 }">
            <div class="box">
                <div class="num">
                    已选中<i>{{ selectIds.length }}</i>个 <i class="cancel-select" @click="handleCancelSelect"></i>
                </div>
                <a class="select-all" @click="handleSelectAll">{{ isCkAll ? '取消全选' : '全选' }}</a>
                <a class="fav-to" @click="handleRemoveFav">取消收藏</a>
                <a class="move-to" @click="handleShowMove">移动到</a>
            </div>
        </div>

        
        <a-modal v-model="showFav" destroyOnClose centered :footer="null"  :closable="false" width="471px">
            <Fav :favmodules="favModules" @close="showFav = false" :ismove="true" :foldertype="1" :imgids="selectIds" @favsucc="onFavSucc" />
        </a-modal>

        <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body  :visible.sync="showInfo" direction="btt">
            <!-- 游戏详情 -->
            <gameInfo @close="onInfoClose" v-if="pageType=='game'" :id="currentId"/>
            <!-- 作品详情 -->
            <workInfo @close="onInfoClose" v-else-if="pageType=='work'" :id="currentId"/>
            <!-- 文章详情 -->
            <articleInfo @close="onInfoClose" v-else-if="pageType=='article'" :id="currentId"/>
        </el-drawer>
    </div>
</template>

<script>
import Empty from '@/components/Empty'
import gameInfo from '@/components/gameInfo'
import articleInfo from '@/components/articleinfo'
import workInfo from '@/components/workinfo'
import Fav from '@/components/Fav'
import SparkMD5 from 'spark-md5'
import api from '@/api/api'
import DropDown from '@/components/dropdown'
export default {
    components: { DropDown, Fav,gameInfo,articleInfo,workInfo,Empty },
    data() {
        return {
            favModules:[],
            isloading:true,
            loginUid:'',
            pageType:'',
            curFullPath:'',
            currentId:'',
            showInfo:false,
            keyword: '',
            isCkAll: false,
            showFav: false,
            infoUrlEnum: {
                244: { url: '/game/', name: '游戏',pageType:'game'},
                22: { url: '/game/', name: '游戏',pageType:'game'},
                1: { url: '/work/', name: '作品' ,pageType:'work'},
                50: { url: '/video/', name: '短视频' ,pageType:'video'},
                9: { url: '/article/', name: '文章' ,pageType:'article'}
            },
            params: {
                type: ''
            },
            statusList: [{ value: '22', title: '游戏' }, { value: '1', title: '作品' }, { value: '9', title: '文章' }],
            info: {
                collectList: [],
                member: {tagsList:[]},
                thumbnailList: []
            }
        }
    },
    computed: {
        selectIds() {
            let modules=[];
            let datas = this.info.collectList.filter((r) => {
                return r.selected
            })
            let ids = datas.map((item) => {
                if(item.article){
                    if(item.article.categoryTopId==22){
                        modules.push('GAME')
                    }else if(item.article.categoryTopId==1){
                        modules.push('WORK')
                    }else if(item.article.categoryTopId==9){
                        modules.push('ARTICLE')
                    }
                }
                return item.collectId
            })
            this.favModules=modules;
            this.isCkAll = ids.length == this.info.collectList.length
            return ids
        },
    },
    methods: {
        handleShowMove(){
            this.showFav = true;
        },
        loadError(e,item){
            if(item.thumbnaiBean&&item.thumbnaiBean.thumbnail){
                e.target.src=item.thumbnaiBean.thumbnail;
                e.target.removeAttribute('srcset');
            }else{
                e.target.removeAttribute('srcset');
            }
        },
        async handleFollowFolder() {
            let ckPass=this.$bhelper.checkLogin(this);
            if(!ckPass)return;
            let item = this.info;
            if (item.isSubscribe == 0) {
                let res = await api.followFolder({ explorerId: item.id });
                // let res = await api.followFolder(item.id);
                if (res.code == 0) {
                    item.num++;
                    item.isSubscribe = 1;
                    this.$amessage.success('关注+1，灵感不断！');
                }
            } else {
                let res = await api.cancelFollowFolder({ explorerId: item.id });
                // let res = await api.cancelFollowFolder(item.id);
                if (res.code == 0) {
                    item.num--;
                    item.isSubscribe = 0;
                    this.$amessage.success('取关成功');
                }
            }
        },
        onInfoClose(){
            window.history.pushState({}, 0,this.curFullPath);
            document.body.style.overflow='inherit';
            this.showInfo=false;
        },
        onFavSucc() {
            let that = this;
            let items = this.info.collectList.filter((item) => {
                if (!that.selectIds.includes(item.collectId)) {
                    return item;
                }
            })
            this.info.collectList = items;
            this.showFav = false;
        },
        handleCancelSelect() {
            this.info.collectList.map((item) => {
                item.selected = false
            })
            this.isCkAll = false
        },
        handleSelectAll() {
            let that = this
            if (that.selectIds.length != this.info.collectList.length) {
                this.info.collectList.map((item) => {
                    item.selected = true
                })
            } else {
                this.info.collectList.map((item) => {
                    item.selected = !that.isCkAll
                })
            }
        },
        async handleRemoveFav() {
            let ids = [];
            this.info.collectList.filter(item => {
                if (item.selected) {
                    ids.push(item.article.id);
                }
            })
            if (ids.length == 0) {
                this.$message({
                    message: '未选择数据',
                    type: 'warning'
                })
                return;
            }
            let res = await api.batchCancelFavMutipleArticles(ids);
            if (res.code == 0) {
                let items = this.info.collectList.filter((item) => {
                    if (!ids.includes(item.article.id)) {
                        return item;
                    }
                })
                this.info.collectList = items;
            }
        },
        toInfo(item) {
            if(this.selectIds.length>0){
                item.selected=!item.selected;
                return;
            }
            // this.pageType=this.infoUrlEnum[item.article.categoryTopId].pageType;
            // this.currentId=item.article.id;
            // this.showInfo=true;

            let routeData = this.$router.resolve({ path: this.infoUrlEnum[item.article.categoryTopId].url + item.article.id });
            window.open(routeData.href, '_blank');
        },
        get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        onImgError(e) {
            e.target.src = require('../../../assets/pro/default_uimg.svg');
        },
        version(time) {
            let date = new Date(time)
            return date.getTime()
        },
        handleBack() {
            if(this.loginUid)
                this.$router.replace({path:localStorage.getItem('FOL-BACK-P')});
            else
                this.$router.replace({path:'/'})
        },
        onSearch() {
            if (this.keyword) {
                let that = this;
                this.info.collectList.map(item => {
                    if (item.article.title.indexOf(that.keyword) > -1) {
                        item.show = true;
                    } else {
                        item.show = false;
                    }
                })
            } else {
                this.info.collectList.map(item => {
                    item.show = true;
                })
            }
        },
        onDdlSearch() {
            if (this.params.type && this.keyword) {
                let that = this;
                this.info.collectList.map(item => {
                    if (item.article.categoryTopId == that.params.type && item.article.title.indexOf(that.keyword) > -1) {
                        item.show = true;
                    } else {
                        item.show = false;
                    }
                })
            } else if (this.params.type) {
                let that = this;
                this.info.collectList.map(item => {
                    if (item.article.categoryTopId == that.params.type) {
                        item.show = true;
                    } else {
                        item.show = false;
                    }
                })
            } else if (this.keyword) {
                let that = this;
                this.info.collectList.map(item => {
                    if (item.article.title.indexOf(that.keyword) > -1) {
                        item.show = true;
                    } else {
                        item.show = false;
                    }
                })
            } else {
                this.info.collectList.map(item => {
                    item.show = true;
                })
            }
        }
    },
    async mounted() {
        if(localStorage.getItem('token')){
            this.loginUid=localStorage.getItem('userId');
        }
        this.isloading=true;
        let res = await api.getFavArticleDetail(this.$route.params.fid);
        
        let domainUrl=this.$imgdomainurl;
        if (res.data && res.data.collectList) {
            res.data.collectList.map(item => {
                item.selected = false;
                item.show = true;

                let _vtime=null;
                if(item.updateTime){
                    _vtime=item.updateTime;
                }else if(item.createTime){
                    _vtime=item.createTime;
                }else if(item.create_time){
                    _vtime=item.create_time.replace('T',' ');
                }
                _vtime=Math.abs(new Date(_vtime).getTime());
                let srcsets=[];
                srcsets.push(domainUrl+'article-'+item.article.id+'-'+_vtime+'@1x800.webp 1x');
                srcsets.push(domainUrl+'article-'+item.article.id+'-'+_vtime+'@2x800.webp 2x');
                srcsets.push(domainUrl+'article-'+item.article.id+'-'+_vtime+'@3x800.webp 3x');
                item.srcsets=srcsets.join(',')
                item.lazy={
                    src:domainUrl+'article-'+item.article.id+'-'+_vtime+'@1x800.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
            })
        }else{
            res.data.collectList=[];
        }
        this.info = res.data;
        this.isloading=false;
    }
}
</script>

<style scoped lang="less">
.game-list-page {
    .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        grid-gap:20px;
        .left {
            width:calc(100% - 110px);
            .back-tit {
                font-size: 18px;
                font-weight: 500;
                display: flex;
                align-items: center;
                width:max-content;
                .tit-text{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-right:10px;
                }
                .back {
                    width: 20px;
                    height: 20px;
                    background: url('../../../assets/pro/icon_next_page_back.svg') no-repeat;
                    background-size:cover;
                    background-position:center center;
                    margin-right:4px;
                    min-width:20px;
                }

                i {
                    font-size: 16px;
                    color: #5D5C5C;
                    font-style: normal;
                    margin-left: 5px;
                    margin-right:10px;
                }
                
                .f-type{
                    line-height: 20px;
                    font-size: 10px;
                    padding: 0px 4px;
                    border-radius: 3px;
                    display: inline-block;
                    position: relative;
                    overflow: hidden;
                    margin-left:5px;
                    color:#725959;
                    min-width: max-content;
                    &:before{
                        content: '';
                        width: 100%;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        height: 100%;
                        background: rgba(228, 36, 82, 0.14);
                    }
                }
            }

            .desc-row {
                font-size: 14px;
                color: #969696;
                margin-top: 16px;
                max-width:75%;
            }
        }

        .fav-btn {
            width: 90px;
            text-align: center;
            border-radius: 8px;
            line-height: 40px;
            font-size: 14px;
            background: #11CCB1;
            transition:.1s all linear;
            // box-shadow: 0px 5px 11px 0px rgba(18, 17, 20, 0.4);
            min-width:90px;
            &:not(.active):hover{
                background: #0fab94;
            }
            &.active{
                background: #29272F;
            }
        }
    }

    .sub-row {
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;

            .img-box {
                width: 24px;
                height: 24px;
                border-radius: 24px;
                overflow: hidden;
            }

            .uname {
                margin-left: 12px;
                font-size: 14px;
                color: #fff;
                font-weight: 600;
                border-right: 1px solid #4B4B4B;
                padding-right: 19px;
                margin-right: 18px;
            }

            .time {
                color: #969696;
                font-size: 12px;
            }
            .follow-num{
                color: #969696;
                margin-left:10px;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .seach-bx {
                width: 215px;
                margin-right: 15px;
                form{
                    display: flex;
                    align-items: center;
                    background: #29272F;
                    border-radius: 8px;
                }
                input {
                    background: #29272F;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 8px;
                    border: none;
                    padding-left: 36px;
                    color: #fff;
                    font-size: 14px;
                    background-image: url('../../../assets/pro/header/search_icon.svg');
                    background-repeat: no-repeat;
                    background-position: 14px center;
                    background-size: 16px 16px;
                    width: 100%;
                }
                .clear-by-search {
                    min-width: 14px;
                    height: 14px;
                    background: url('../../../assets/pro/cancel_search.svg') no-repeat;
                    background-size: cover;
                    margin-right: 10px;
                    cursor: pointer;
                }
            }
        }
    }

   

    .games {
        display: flex;
        flex-wrap: wrap;
        margin-top: 38px;
        grid-gap: 20px;

        .fav-d-item {
            width: calc((100% - 80px) / 5);
            min-height: 290px;
            // margin-right: 20px;
            // margin-bottom: 20px;
            background: #171717;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            border: 2px solid transparent;
            animation: opacity .2s linear;

            .hid-el {
                // display: none;
                transition: 0.1s all linear;
                opacity: 0;
            }

            .select-btn {
                width: 20px;
                height: 20px;
                position: absolute;
                left: 10px;
                top: 10px;
                z-index: 1;
                background: url('../../../assets/pro/mutiple_select_pic.svg') no-repeat;
                background-size: cover;

                &.active {
                    background: url('../../../assets/pro/mutiple_selected_pic.svg') no-repeat;
                    background-size: cover;
                }
            }

            &:hover {

                border-color: #11CCB1;

                .img-flex-box {
                    img {
                        transform: scale(1.08);
                    }
                }

                .hid-el {
                    opacity: 1;
                }
            }

            &.create-btn {
                border: 2px dashed #424242;
                border-radius: 16px;
                transition: 0.1s all linear;

                a {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    text-align: center;

                    .plus-icon {
                        width: 40px;
                        height: 40px;
                        border-radius: 40px;
                        background-color: #29272f;
                        display: block;
                        text-align: center;
                        line-height: 40px;
                        margin: 91px auto 18px auto;
                        background-image: url('../../../assets/pro/list_create_plusico.svg');
                        background-repeat: no-repeat;
                        background-size: 40px 40px;
                    }

                    .text {
                        font-size: 14px;
                        color: #fff;
                        font-weight: 500;
                    }
                }

                &:hover {
                    border-color: #fff;
                }
            }

            &.active {
                .select-btn {
                    opacity: 1;
                }
            }

            .img-flex-box {
                display: flex;
                align-items: center;
                position: relative;
                // height: 269px;
                overflow: hidden;
                border-radius: 16px;

                .lt-img {
                    width: 204px;
                    height: 210px;
                    margin-right: 6px;
                    border-radius: 16px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .rt-img {
                    .next-img {
                        width: 102px;
                        height: 102px;
                        margin-bottom: 6px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .last-img {
                        width: 102px;
                        height: 102px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }

                .main-img {
                    // height: 269px;
                    width: 100%;
                    // overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .ops {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        display: none;
                        transition: .2s all linear;

                        a {
                            border-radius: 12px;
                            background: #FFFFFF;
                            width: 40px;
                            height: 40px;
                            transition: .2s all linear;

                            &:hover {
                                // opacity:.9;
                                background-color: #e1e1e1;
                            }
                        }

                        .i-del {
                            background-image: url('../../../assets/pro/i_del.png');
                            background-size: 22px 22px;
                            background-repeat: no-repeat;
                            background-position: center;
                            margin-right: 10px;
                        }

                        .i-edit {
                            background-image: url('../../../assets/pro/i_edit.png');
                            background-size: 22px 22px;
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    }
                }

                .author {
                    position: absolute;
                    bottom: 10px;
                    left: 9px;
                    background: rgba(255, 255, 255, 0.9);
                    border-radius: 12px;
                    padding: 10px 13px;
                    transition: 0.1s all linear;
                    width: 164px;
                    cursor: pointer;

                    &:hover {
                        background: rgba(255, 255, 255, 1);
                    }

                    .ar-tit {
                        font-size: 14px;
                        font-weight: 500;
                        color: #383737;
                        line-height: 20px;
                        margin-bottom: 5px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        background: url('../../../assets/pro/take_tit_icon.svg') no-repeat;
                        background-position: left center;
                        padding-left: 22px;
                    }

                    .u-box {
                        display: flex;
                        padding-left: 20px;

                        .name {
                            font-size: 14px;
                            color: #969696;
                            font-weight: 500;
                        }

                        .avatar {
                            width: 20px;
                            height: 20px;
                            border-radius: 20px;
                            margin-right: 7px;
                        }
                    }
                }

                .at-btn {
                    color: #fff;
                    font-size: 14px;
                    background-color: #11CCB1;
                    border-radius: 12px;
                    line-height: 44px;
                    background-image: url('../../../assets/pro/un_follow_ico.svg');
                    background-repeat: no-repeat;
                    background-position: 11px center;
                    // width:82px;
                    padding-left: 35px;
                    padding-right: 19px;
                    text-align: center;
                    position: absolute;
                    left: 10px;
                    top: 10px;
                }

                .ated-btn {
                    color: #383737;
                    font-size: 14px;
                    background-color: #fff;
                    border-radius: 12px;
                    line-height: 44px;
                    background-image: url('../../../assets/pro/cancel_follow_ico.svg');
                    background-repeat: no-repeat;
                    background-position: 11px center;
                    // width:82px;
                    padding-left: 35px;
                    padding-right: 19px;
                    text-align: center;
                    position: absolute;
                    left: 10px;
                    top: 10px;
                }

                .edit-btn {
                    color: #383737;
                    font-size: 14px;
                    background-color: #fff;
                    border-radius: 12px;
                    line-height: 44px;
                    width: 40px;
                    height: 40px;
                    text-align: center;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    background-image: url('../../../assets/pro/edit_ico.svg');
                    background-repeat: no-repeat;
                    background-position: center center;
                }

                .hid-el {
                    // display: none;
                    transition: .1s all linear;
                    opacity: 0;
                }

                &:hover {
                    .hid-el {
                        // display: inline-block;
                        opacity: 1;
                    }
                }
            }

            .bot-desc {
                font-size: 16px;
                display: flex;
                justify-content: space-between;
                margin-top: 9px;
                align-items: center;
                padding-right: 16px;

                .file-name {
                    color: #fff;
                    font-weight: 500;
                    padding-left: 15px;
                    font-size: 16px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 80%;
                }

                .zan-num {
                    color: #969696;
                    background: url('../../../assets/pro/dianzanicon.svg') no-repeat;
                    padding-left: 24px;
                    font-size: 12px;
                    background-position: left center;
                }

                .type-text {
                    border: 1px solid #4B4B52;
                    border-radius: 2px;
                    color: #848393;
                    font-size: 12px;
                    padding: 0px 5px;
                    line-height: 18px;
                    white-space: nowrap;
                    margin-left: 30px;
                }
            }

            .bot-author {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 15px;
                margin-top: 11px;
                padding-bottom: 14px;
                padding-right: 16px;
                white-space: nowrap;
                .u {
                    display: flex;
                    align-items: center;

                    .img-box {
                        width: 20px;
                        height: 20px;
                        border-radius: 20px;
                        overflow: hidden;
                        margin-right: 6px;
                        display: flex;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .name{
                        display: flex;
                        align-items: center;
                    }
                    &:hover {
                        color: #11CCB1;
                    }
                }

                .like-num {
                    background: url('../../../assets/pro/icon_like2.svg') no-repeat;
                    background-position: left center;
                    background-size: 20px 20px;
                    padding-left: 22px;
                    line-height:20px;
                }

                .vnum {
                    font-size: 12px;
                    background: url('../../../assets/pro/l_vnum.svg') no-repeat;
                    padding-left: 20px;
                    background-position: left center;
                    // color: #fff;
                    line-height: 20px;
                    margin-left:20px;
                    color:#52565A;
                }
            }
        }
    }
}
</style>